<template>
    <div>
        <Form ref="formValidate" :model="formValidate" :label-width="100" :rules="ruleValidate">
            <FormItem label="教师" prop="user_id">
                <div @click="othermodule=true">
                    <RadioGroup v-model="formValidate.user_id" type="button" size="large">
                        <Radio :label="formValidate.user_id">{{username}}</Radio>
                    </RadioGroup>
                </div>
            </FormItem>
    
            <FormItem label="部门">
                <Cascader :data="departments" change-on-select placeholder="请选择部门" :load-data="loadData" @on-change="loadStationlook"></Cascader>
            </FormItem>
            <FormItem label="可查看的考勤岗位" prop="position_id">
                <Select placeholder="可查看的考勤岗位" v-model="formValidate.position_id" style="margin:9px 0" multiple>
                        <Option v-for="item in stationInfolook" :value="item.id" :key="item.id">{{item.position_name.zh?item.position_name.zh:item.position_name.mn}}</Option>
                    </Select>
            </FormItem>
    
            <div style="width:90%;">
                <FormItem style="width:100%;">
                    <Button type="primary" @click="handleSubmit('formValidate')">添加</Button>
                </FormItem>
            </div>
            <div style="clear:both"></div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Form>
        <Modal v-model="othermodule" title="请选择教师" width="350" slot="others">
            <teacher-s-module @on-select="othermodulebutton"></teacher-s-module>
        </Modal>
    </div>
</template>

<script>
    export default {
        components: {
            TeacherSModule: resolve => {
                require(['&/Authpub/TeacherSModule.vue'], resolve);
            },
        },
        data() {
            return {
                othermodule: false,
                username: '请选择教师',
                spinShow: false,
    
                departments: [], //部门数据
                stationInfolook: [], //岗位数据
    
                addUrl: 'api/teacher/v1/attendancedey/add',
                formValidate: {
                    position_id: [], //部门id
                    user_id: null, //教师id  
                    userdepartment_id: null,
                },
                ruleValidate: {
                    position_id: [{
                        type: 'array',
                        required: true,
                        message: '请选择可查看的考勤岗位',
                        trigger: 'change'
                    }],
                    user_id: [{
                        type: 'number',
                        required: true,
                        message: '请选择教师',
                        trigger: 'change'
                    }],
                },
            }
        },
        methods: {
    
    
            /************************************************************
             * 
             * 获取部门列表信息
             * 
             ************************************************************/
            getAllDepart() {
                this.spinShow = true
                this.$http.get('api/user/v1/department/info').then(res => {
                    this.departments = this.process(res.data)
                    this.spinShow = false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.spinShow = false
                })
            },
    
            /************************************************************
             * 
             * 处理数据
             * 
             ************************************************************/
            process(data) {
                let arr = []
                data.forEach(item => {
                    item.title = item.label = item.department_name.zh ? item.department_name.zh : item.department_name.mn
                    item.value = item.id
                    if (item.childs) {
                        item.loading = false,
                            item.children = []
                    }
                    arr.push(item)
                })
                return arr
            },
    
            /************************************************************
             * 
             * 异步加载二级部门
             * 
             ************************************************************/
            loadData(item, callback) {
                this.spinShow = true
                item.loading = true;
                this.$http.get('api/user/v1/department/info?pid=' + item.id).then(res => {
                    item.children = []
                    let data = this.process(res.data)
    
                    item.children = data
                    item.loading = false;
                    callback()
                    this.spinShow = false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.spinShow = false
                })
            },
    
            /************************************************************
             * 
             * 根据部门id查询岗位信息
             * 
             ************************************************************/
            loadStationlook(value) {
                if (value.length != 0) {
                    this.spinShow = true
                    let id = value.slice(-1)
                    this.formValidate.userdepartment_id = id[0]
                    this.$http.get('api/user/v1/department/get/position/user/list?department_id=' + id).then(res => {
                        this.stationInfolook = res.data
                        this.spinShow = false
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow = false
                    })
    
                }
            },
    
            /************************************************************
             * 
             * 点击教师请求列表数据
             * 
             ************************************************************/
            othermodulebutton(val) {
                this.username = val.teacher_name.zh?val.teacher_name.zh:val.teacher_name.mn
                this.formValidate.user_id = val.teacher_id //教师id
                this.othermodule = false
            },
    
    
            /************************************************************
             * 
             * 提交时
             * 
             ************************************************************/
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.spinShow = true //输入框禁用
                        this.$http.post(this.addUrl, this.formValidate).then(val => {
                            this.$emit('showParent', false)
                            this.$emit('backList', true)
                            this.$Message.success(val.message);
                            this.spinShow = false
                        }).catch(err => {
                            if (err.code && err.code == 422) {
                                this.$Message.error(err.message);
                            }
                            this.spinShow = false
                        })
                    } else {
                        this.$Message.error("表单验证失败!");
                    }
                })
            },
        },
        created() {
            this.getAllDepart()
        },
    }
</script>